<template>
  <div id="handOverList" class="mainContent">
    <div class="timeBox cleatfix" >
    <vue-datepicker-local v-model="emptyTime" clearable style="visibility:hidden;"/>
    <button class="pull-right" @click="Update">更新</button>
    </div>
    <div class="list-link cleatfix" v-if="handOverList.length">
      <div v-for="(item,index) in handOverList" @click="change($event)" :data-date="filterTime(item.ARCHIVEDATE)" class="handOverBox">
        <img src="./../../../../static/images/course.png" width="80" alt="Alternate Text" />
        <div>{{item.ARCHIVEDATE | filterDateTime}}</div>
      </div>
    </div>
    <loading v-if="handOverList.length == 0 && isShow "></loading>
    <noSearch v-if="handOverList.length == 0 && !isShow "> </noSearch>
  </div>
</template>
<script>
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import {standardDate } from "@/components/common/date"; //引入时间转换JS
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import { apiGettPatientRecordListByPatientId, apiSynPatientRecord } from '@/api/api' //引入查询患者的所有交班信息
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
export default {
    data() {
      return {
        handOverList: [],
        src: '',
        ind: 0,
        isShow: true,
        emptyTime: '',
        datatime:''
      }
    },
    watch: {
      datatime: {
        handler(curVal, oldVal) {
          if (this.dataTime == '') {
            //this.handOverList = [];
            //this.datatime = "";
            //this.isShow = true;

          } else {
            //this.handOverList = [];
            //this.isShow = true;

          }
        }
      }
    },
    mounted() {
      this.GettPatientRecordListByPatientId();
      Bus.$on("timePicker", e => {
        this.datatime = e.trim();
      });
    },
    methods: {
      change(e) {
        let date = e.currentTarget.getAttribute("data-date");
        this.$router.push({
          path: '/handOver/handOverDetails',
          query: {item: 9 ,date : date}
        })
        //console.log(date)
      },
      Update() {
        //this.handOverList = [];
        this.$toast.center('正在更新中……')
        apiSynPatientRecord({
          patientNo: this.$store.getters.ID,
          date: standardDate(new Date())
        })
          .then(res => {
            if (typeof (JSON.parse(res)) == "object" && Object.prototype.toString.call(JSON.parse(res)).toLowerCase() == "[object object]" && !JSON.parse(res).length) {
              this.GettPatientRecordListByPatientId();
              this.$toast.center('更新成功……');
            } else {
              this.$toast.center('更新失败……');
            }
            //console.log(typeof (JSON.parse(res)) == "object" && Object.prototype.toString.call(JSON.parse(res)).toLowerCase() == "[object object]" && !JSON.parse(res).length); //判断是否返回为json对象  
          })
          .catch(err => {
            this.$toast.center('请求超时……');
          })
      },
      GettPatientRecordListByPatientId() {
        this.handOverList = [];
        apiGettPatientRecordListByPatientId({
          patientId : this.$store.getters.ID
        })
          .then(res => {
            if (res == '[]') {
              this.isShow = false;
              this.handOverList = [];
            } else {
              this.isShow = true;
              let arr = [];
              for (let item of JSON.parse(res)) {
                if ($.inArray(this.filterTime(item.ARCHIVEDATE), arr) == -1) {
                  this.handOverList.push(item);
                  arr.push(this.filterTime(item.ARCHIVEDATE));
                }
              }
            //console.log(JSON.parse(res))
            }
            
          })
      },
      filterTime(time) {
        if (!time) {
          return time;
        } else {
          return time.replace('T', '  ').substring(0, 10);
        }
      }

    },
    components: {
      VueDatepickerLocal,
      loading,
      noSearch
    }
}
</script>
<style scoped>
  #handOverList {
    position:relative;
    height: 100%;
    width: 100%;
    padding: 15px;
  }

  .list-link {
    width: 100%;
    height: calc(100vh - 200px);
    overflow-y: auto;
  }

  .handOverBox {
    float: left;
    width: 140px;
    margin-left: 15px;
    margin-bottom: 45px;
    text-align: center;
  }

    .handOverBox > div {
      display: flex;
      margin-top: 10px;
      justify-content: center;
      align-items: center;
    }

  .timeBox {
    padding-left: 46px;
    padding-bottom: 20px;
    padding-right:50px;
  }
    .timeBox button {
      padding: 7px 15px;
      background-color: #11a7f3;
      color: #fff;
    }
</style>
